<div class="pm_modal small very-important {{ctrl.class}}" role="dialog" style="display: block;">
    <div class="modal-dialog">
        <button type="button" ng-click="ctrl.cancel()" aria-hidden="true" title-translate="Close" title-translate-context="Action" class="fa fa-times close"></button>
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" translate translate-context="Title">Set Up Two Factor Authentication</h4>
            </div>
            <div class="modal-body">
                <p class="text-center" ng-hide="ctrl.manual" translate-context="2FA setup modal" translate>Scan this QR code with your two factor authentication device to set up your account.</p>
                <p class="text-center" ng-show="ctrl.manual" translate-context="2FA setup modal" translate>Manually enter this information into your two factor authentication device to set up your account.</p>
                <p class="text-center">
                    <a href="#" ng-click="ctrl.displayManual()" ng-hide="ctrl.manual" translate-context="Action" translate>Enter key manually instead</a>
                    <a href="#" translate-context="Action" ng-click="ctrl.displayManual()" ng-show="ctrl.manual" translate>Scan QR code</a>
                </p>
                <div ng-show="ctrl.manual" class="pm_table">
                    <table class="bordered">
                        <tbody>
                            <tr>
                                <th scope="row" style="width: 60px;" translate-context="2FA setup modal" translate>Key</th>
                                <td><code>{{ ctrl.sharedSecret }}</code></td>
                            </tr>
                            <tr>
                                <th scope="row" translate-context="2FA setup modal" translate>Interval</th>
                                <td translate-context="2FA setup modal" translate>30 seconds</td>
                            </tr>
                            <tr>
                                <th scope="row" translate-context="2FA setup modal" translate>Length</th>
                                <td translate-context="2FA setup modal" translate>6 digits</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <p align="center" id="qrcode" ng-if="!ctrl.manual" ng-init="ctrl.makeCode()"></p>
            </div>
        </div>
        <div class="modal-footer">
            <button class="pm_button modal-footer-button" ng-click="ctrl.cancel()" translate translate-context="Action">Cancel</button>
            <button tabindex="1" type="button" class="pm_button primary modal-footer-button" ng-click="ctrl.next()" translate translate-context="Action">Next</button>
        </div>
    </div>
    <div class="modal-overlay"></div>
</div>
